<template>
    <div>
        <div class="container">
            <div class="handle-box">
                <label class="label" >用户名：</label>
                <el-input class="handle-input" v-model="form.username" >     
                </el-input>
                    <el-button color="#1C84C6" class="handle-btn"  @click="handleSearch">查询</el-button>
                    <el-row class="top-btn">
                        <el-button color="#23C6C8"  style="color: #fff;" @click="exportOne">导出</el-button> 
                </el-row>
                </div>
                <el-table ref="multipleTableRef" 
                    :header-cell-style="{color:'#2A62BC'}"
                     :data="tableData"   
                     style="width: 100%;" 
                    size="small"
                    border
                    stripe 
                  >
                    <el-table-column  prop="stu_id" label="学号"  ></el-table-column>
                    <el-table-column prop="name" label="姓名"></el-table-column>
                    <el-table-column prop="course" label="课程"></el-table-column>
                    <el-table-column prop="chapter" label="所属章"></el-table-column>
                    <el-table-column prop="start_time" label="开始时间"></el-table-column>
                    <el-table-column prop="start_location" label="开始位置"></el-table-column>
                    <el-table-column prop="end_time" label="结束时间"></el-table-column>
                    <el-table-column prop="end_location" label="结束位置"></el-table-column>
                    <el-table-column prop="maximum_overshoot" label="最大进度"></el-table-column>
                    <el-table-column prop="video_time" label="视频时长"></el-table-column>
                </el-table>
                <!-- 分页 -->
                <div class="pagination">
                    <el-pagination
                    :current-page="query.pageIndex"
                        :page-size="query.pageSize"
                        :page-sizes="[5, 10, 15, 20]"
                        :small="small"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="pageTotal"
                        @size-change="handleSizeChange"
                        @current-change="handlePageChange"/>
                </div>
        </div>
    <!-- 导出弹窗 -->
        <el-dialog title="请选择" v-model="exportVisible" width="20%">
            <el-form label-width="75px">
				<el-form-item label="姓名:" >
					<el-input v-model="form.username"  ></el-input>
				</el-form-item>
                <el-form-item label="时间范围:" >
					<el-date-picker  v-model="form.time" type="daterange" 
                    range-separator="到">
                    </el-date-picker>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button color="#C2C2C2" style="color: #fff;" @click="exportVisible = false">关闭</el-button>
					<el-button color="#1ab394" style="color: #fff;" @click="commitExport">确认导出</el-button>
				</span>
			</template>
            </el-dialog>
    
            <!-- </div> -->
        </div>
    </template>
    
    <script setup lang="ts">
    import { ref, reactive } from 'vue';
    import { ElMessage, ElMessageBox } from 'element-plus';
    import { Delete, Edit, Search, CaretBottom } from '@element-plus/icons-vue';
    import { getWatchVideoCount} from '../../api/analysis' ;
    let form = reactive({
        username:'',
        time:''
    });
    

    //分页字体
    const small = ref(true)
    // const size = ref<'default' | 'large' | 'small'>('default')
    
    //分页数据
    const query = reactive({
        pageIndex: 1,
        pageSize: 5,
    });
    //
    
    //表格数据
    const tableData = ref();
    //总页数
    const pageTotal = ref(0);
    const multipleTableRef = ref()
    const state = reactive({
        multipleSelection:[]
    })
    
    // 获取表格数据  分页是数据截取  后台结合一起后  直接返回分页的后的数据
    const getData = () => {
        getWatchVideoCount({pageCurrent:query.pageIndex,pageSize:query.pageSize}).then(res=>{
            console.log(res,"---res---")
            // tableData.value = res.data.
            let start  = (query.pageIndex-1)*query.pageSize;//开始位置
            let end =query.pageIndex*query.pageSize  ;//结束位置 数组的截取的时候 [start,end) suo所以不用-1
            tableData.value = res.data.slice(start,end);
            // tableData.value = res.data;
            pageTotal.value = res.data.length
        })
       
        
    };
    getData();
    //多选框权限
    const handleSelectionChange = (val) => {
      state.multipleSelection = val
    }
    // 分页导航
    const handleSizeChange = (val: number) => {
      // console.log(`${val} items per page`)
      query.pageSize = val;
      getData()
    }
    const handlePageChange = (val) => {
        query.pageIndex = val;
        console.log(val,"==")
        console.log(query.pageSize)
        getData()
    };
    // 查询操作  to... 需要自己实现与后台交互
    const handleSearch = () => {
        query.pageIndex = 1;
        getData();
    };
    
// 导出 弹框
const exportVisible = ref(false)
const exportOne=(row)=>{
   exportVisible.value=true;
}
const commitExport =()=>{
  // 倒数数据的操作 。。。。
}

</script >
<style lang="less" scoped>
    .handle-box {
        margin-bottom: 20px;   
        .handle-btn{
            margin-left: 8px;
        }    
    }
    .handle-input {
        width:200px;
    }
    .label{
       display: inline-block;
       max-width:100%;
       margin: 5px;
       font-weight: 700; 
    }
    .red {
        color: #F56C6C;
    }
    .blue {
        color: #1296e2;
        font-weight: bold;
    }
   
    .top-btn{
        float: right;
        .el-button{
            margin-left: 5px;
        }
    }
    .right-btn{
         justify-content:center;
        .el-button{
            height: 22px;
            // width: 60px;
            margin-right: 10px;
            padding: 1px 5px;
        }
    }
    
    
    </style>